<template>
  <div class="zy-content ">
    <!--查询条件-->

    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{ $t('equipCheck.SerialNo') }}</p>
            <div class="ipt">
              <Input type="text" v-model="searchParams.deviceMId" clearable :placeholder="`${$t('common.inputInfo')}`"
                     class="inputBorder" :maxlength="32"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('equipCheck.EquipmentNo') }}</p>
            <div class="ipt">
              <Input type="text" v-model="searchParams.deviceNo" clearable :placeholder="`${$t('common.inputInfo')}`"
                     class="inputBorder" :maxlength="32"></Input>

            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('ledger.RelocationType') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.ydlx" filterable clearable
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item,index) of changesList" :value="item.id" :key="index">{{ item.name }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('ledger.TransactOutFactory') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.oldBelongCompanyId" filterable clearable
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item,index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('ledger.TransactInFactory') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.newBelongCompanyId" filterable clearable
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item,index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" type="primary" @click="changeNum()"
                      v-if="checkBtnPermission.alienStatisticsList">{{ $t('common.Query') }}
              </Button>
              <Button class="reset-btn" @click="reset()"
                      v-if="checkBtnPermission.alienStatisticsList">{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="handleOutRecords" v-if="checkBtnPermission.alienStatisticsExport">
          {{ $t('common.batchExport') }}
        </Button>

      </div>
      <div class="tableContent">
        <Table
            class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
          style="margin-top: 10px"
          row-key="id"
          :columns="stageColumns"
          :data="dataSource"
          @on-selection-change="handleSelectionChange"
        >
<!--          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn"
                  @click="handleDetail(row)" v-if="checkBtnPermission.alienStatisticsList">
              <i class="iconfont zy-common-chakan"></i>
              {{ $t('common.Check') }}
            </span>
          </template>-->
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="ids.length"/>
        <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
              @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
      </div>
    </div>
    <!--新增异动-->
    <!--        <add-changes-modal ref="addChangesModal" :factoryList="factoryList" :orgList="orgList" @handleRefresh="handleRefresh"/>-->
  </div>
</template>

<script>
import recursion from '../../../util/recursion'
import fileDownload from 'js-file-download'
// import AddChangesModal from './modules/AddChangesModal.vue'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "alienStatistics",//异动统计
  mixins:[toggleTableOperation],
  components: {
    // AddChangesModal,
  },
  data() {
    return {
      total: this.stageTotal,
      pageNum: 1,
      pageSize: 10,
      delLoading: false,
      searchParams: {
        deviceMId: this.deviceMId
      },
      checkBtnPermission: {},
      pageSizeOption: [10, 20, 30],
      changesList: [
        {id: 0, name: '全部'},
        {id: 1, name: '转售'},
        {id: 2, name: '调拨'},
        {id: 3, name: '租用'},
        {id: 4, name: '借用'},
        {id: 7, name: '借用归还'},
        {id: 5, name: '仅记录'},
        {id: 6, name: '委外生产借用'}
      ],
      stageColumns: [
        {
          type: 'selection',
          minWidth: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          // title: '异动类型',
          title: `${this.$t('ledger.RelocationType')}`,
          key: 'ydlx',
          align: 'center',
          minWidth: 140,
          render: (h, params) => {
            return h('div', params.row.ydlx == 1 ? '转售' : params.row.ydlx == 2 ? '调拨' : params.row.ydlx == 3 ? '租用' : params.row.ydlx == 4 ? '借用' : params.row.ydlx == 5 ? '仅记录' : params.row.ydlx == 6 ? '委外生产借用' : '借用归还')
          },
          resizable: true
        },
        {
          //  title: '异动单号',
          title: `${this.$t('ledger.SerialNo')}`,
          key: 'applyNo',
          align: 'center',
          minWidth: 200,
          resizable: true
        },
        {
          // title: '调出设备管理员',
          title: `${this.$t('调出设备负责人')}`,
          key: 'moveOutAdminName',
          align: 'center',
          minWidth: 140,
          resizable: true
        },
        {
          // title: '调入设备管理员',
          title: `${this.$t('调入设备负责人')}`,
          key: 'moveInAdminName',
          align: 'center',
          minWidth: 180,
          resizable: true
        },
        {
          //  title: '更新日期',
          title: `${this.$t('ledger.Updated')}`,
          key: 'updateTime',
          align: 'center',
          minWidth: 200,
          resizable: true
        },
        {
          //  title: '设备流水号',
          title: `${this.$t('equipCheck.SerialNo')}`,
          key: 'deviceMId',
          align: 'center',
          minWidth: 160,
          resizable: true
        },
        {
          title: `${this.$t('资产编号')}`,
          // title: `${ this.$t('equipCheck.EquipmentNo') }`,
          key: 'assetsNo',
          align: 'center',
          minWidth: 150,
          resizable: true
        },
        {
          //title: `${ this.$t('equipCheck.EquipmentNo') }`,
          title: `${this.$t('equipCheck.EquipmentNo')}`,
          key: 'deviceNo',
          align: 'center',
          minWidth: 150,
          resizable: true
        },
        {
          // title: '设备类别',
          title: `${this.$t('ledger.EuqipmentCategory')}`,
          key: 'categoryName',
          align: 'center',
          minWidth: 170,
          resizable: true
        },
        {
          // title: `${ this.$t('equipCheck.EquipmentName') }`,
          title: `${this.$t('preliminary.EquipmentName')}`,
          key: 'deviceName',
          align: 'center',
          minWidth: 150,
          resizable: true
        },
        {
          // title: '规格型号',
          title: `${this.$t('equipCheck.Model')}`,
          key: 'specification',
          align: 'center',
          minWidth: 120,
          resizable: true
        },
        {
          //  title: '调出工厂名称',
          title: `${this.$t('ledger.TransactOutFactory')}`,
          key: 'oldBelongCompanyName',
          align: 'center',
          minWidth: 180,
          resizable: true
        },
        {
          // title: '调入工厂名称',
          title: `${this.$t('ledger.TransactInFactory')}`,
          key: 'newBelongCompanyName',
          align: 'center',
          minWidth: 180,
          resizable: true
        },
        // {
        //     title: '调出成本中心',
        //     key: 'moveOutCostCenterName',
        //     align: 'center',
        //     minWidth: 120
        // },
        // {
        //     title: '调入成本中心',
        //     key: 'moveInCostCenterName',
        //     align: 'center',
        //     minWidth: 120
        // },
        {
          //  title: '调出功能位置',
          title: `${this.$t('ledger.CallOutFunctionPosition')}`,
          key: 'oldOrgName',
          align: 'center',
          minWidth: 220,
          resizable: true
        },
        {
          // title: '调入功能位置',
          title: `${this.$t('ledger.TransferInFunctionPosition')}`,
          key: 'newOrgName',
          align: 'center',
          minWidth: 220,
          resizable: true
        },
        {
          // title: '实际功能位置',
          title: `${this.$t('ledger.ActualFunctionPosition')}`,
          key: 'newOrgName',
          align: 'center',
          minWidth: 220,
          resizable: true
        },
      ],
      dataSource: this.stageDataSource,
      factoryList: [],//工厂数据
      orgList: [],
      ids: [],
    }
  },
  // props: {
  //     deviceMId: {
  //         type: String,
  //         default: () => ''
  //     },
  //     factoryList: {
  //         type: Array,
  //         default: () => []
  //     },
  //     orgList: {
  //         type: Array,
  //         default: () => []
  //     },
  //     stageDataSource: {
  //         type: Array,
  //         default: () => []
  //     },
  //     stageTotal: {
  //         type: Number,
  //         default: () => 10
  //     }
  // },
  watch: {
    stageDataSource(newValue) {
      this.dataSource = newValue
    },
    stageTotal(newValue) {
      this.total = newValue
    },
  },
  created() {

    this.getTableColumnsWidth(this.stageColumns)

    this.searchList()
    this.getCompanyList()
    this.getOrgList()
  },
  mounted() {
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for (let item of itemList) {
      if (item.code == "alienStatisticsList") {
        this.checkBtnPermission.alienStatisticsList = true
      }
      if (item.code == "alienStatisticsExport") {
        this.checkBtnPermission.alienStatisticsExport = true
      }
    }
  },
  methods: {
    handleSelectionChange(selectionData) {
      // console.log(selectionData)
      let arr = []
      selectionData.forEach(item => {
        arr.push(item.id)
      })
      this.ids = arr
    },
    /**************获取相关下拉数据列表*************/
    getCompanyList() {
      this.axios({
        method: 'get',
        url: '/basic/company/getCompanyListByUser',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          let arr = res.data.map(item => {
            return {
              ...item,
              id: item.id.toString()
            }
          })
          this.factoryList = arr
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'id',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    //详情页
    handleDetail(row) {
      // this.$refs.addChangesModal.show('detail', row, true)
      this.$router.push(({
        path: "/devBasic/equipmentsChangesManagement/addAndDetail",
        query: {
          handleType: "detail",
          ...row,
          detail: true
        }
      }))
    },
    //导出
    handleOutRecords() {
      let params = {
        ids: this.ids.toString(),
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const {length, last = length - 1} = arr
          this.$set(params, key, arr[last])
        } else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }
      }
      const filName = '异动统计'
      this.axios({
        method: 'get',
        url: '/dms/dmsMoveApply/exportRecord',
        responseType: 'blob',
        params
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    handleRefresh() {
      this.searchList()
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const {length, last = length - 1} = arr
          this.$set(params, key, arr[last])
        } else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      this.axios({
        method: 'get',
        url: '/dms/dmsMoveApply/getDeviceTzMoveSpList',
        params: params
      }).then(res => {
        
        if (res.code === 200) {
          this.dataSource = res.data.list
          this.total = res.data.total
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
